How to Create a Table

Designing Tables

Tables are very useful for presentation of tabular information. There are three basic steps to defining a simple table.

First Define the Table itself (appearance of table, cell spacing, backgrounds, etc.) by using <TABLE> tag, then define a row of the table (Again setting the appearance properties to define the background, alignment, etc.) by using <TR> tag and finally defining the columns for a table by using <TD> tag.

Table Elements

Element Description

<TABLE> ... </TABLE> defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.

<CAPTION> ... </CAPTION> defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.

<TR> ... </TR> specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.

<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Table Attributes

NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.

Attribute Description

ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.

VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.

COLSPAN=n The number (n) of columns a cell spans.

ROWSPAN=n The number (n) of rows a cell spans.

NOWRAP Turn off word wrapping within a cell.

General Table Format

The general format of a table looks like this:

<TABLE>

<CAPTION> caption contents </CAPTION>   

<TR>  
    <TH> first header cell contents </TH>    
    <TH> last header cell contents </TH>    
</TR> 

<TR>  
    <TD> first row, first cell contents </TD>
    <TD> first row, last cell contents </TD>    
</TR> 

<TR>  
    <TD> last row, first cell contents </TD>
    <TD> last row, last cell contents </TD>    
</TR> 

</TABLE>

Below is what above HTML code will reproduce.

caption contents
first header cell contents	last header cell contents
first row, first cell contents	first row, last cell contents
last row, first cell contents	last row, last cell contents

The <TABLE> and </TABLE> tags must surround the entire table definition.

The first item inside the table is the CAPTION, which is optional.

Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it.

Think of a table as a Grid. The table itself is the outside boundary of the Grid, and the grid itself is made up of Rows and columns. A Cell represents a single block that can be identified by an X,Y coordinate. The following is an example of a table with 3 rows and 5 columns:

<table border="1" width="50%">
     <tr>
          <td width="20%">Row 1 Col 1</td>
          <td width="20%">Row 1 Col 2</td>
          <td width="20%">Row 1 Col 3</td>
          <td width="20%">Row 1 Col 4</td>
          <td width="20%">Row 1 Col 5</td>
     </tr>
     <tr>
          <td width="20%">Row 2 Col 1</td>
          <td width="20%">Row 2 Col 2</td>
          <td width="20%">Row 2 Col 3</td>
          <td width="20%">Row 2 Col 4</td>
          <td width="20%">Row 2 Col 5</td>
     </tr>
     <tr>
          <td width="20%">Row 3 Col 1</td>
          <td width="20%">Row 3 Col 2</td>
          <td width="20%">Row 3 Col 3</td>
          <td width="20%">Row 3 Col 4</td>
          <td width="20%">Row 3 Col 5</td>
     </tr>
</table>

Row 1 Col 1	Row 1 Col 2	Row 1 Col 3	Row 1 Col 4	Row 1 Col 5
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3	Row 2 Col 4	Row 2 Col 5
Row 3 Col 1	Row 3 Col 2	Row 3 Col 3	Row 3 Col 4	Row 3 Col 5

<table> </table> tag used to build you table

<tr> </tr> tag used to build your rows

<td> </td> tag used to build your columns

Defining Tables:

To define a Table, we will use two tags. The opening table tag (i.e. <table>) and the closing table tag (i.e. </table>) - The following example defines a very basic table. No Rows and No Columns. This basic table will not be recognized by browsers as the table is not complete without at least one Row and one Column, however this is the first step to defining a table:

<table>
</table>

Defining background color to table.

We want to add a background color to our table. This must be done in the opening tag. Each of these attributes will define what the table will look like in the browser. Also, each o attributes may also be overiden when we define the row and columns of the table. To define the properties of your page, everyting was done in the <body> tag. So to define the properties of a table, it must be done in the <table> tag.

Defining the background properties to display a gray background:

<table bgcolor="gray">
</table>

Defining the width of table. Note: If you omit the width the default used by browsers will be the width of the browser window used for displaying the web page:

<table bgcolor="gray" width="50">
</table>

In the above example we have set the table width to be 50% - A Percentage is based upon the window width of the browser displaying the web page. you can be more specific and define the table to be X pixels wide by omitting the Percentage sign. You can also define the height of the table in percent of window height or in pixels high.
Defining the height to be 70% of the window height (Note: Not all browsers support the height attribute)

<table bgcolor="gray" width="50" height ="70">
</table>

Defining the Border width. (This defines the outlining border for each cell and how thick it should be. A Value of 0 will mean no border is to be visible in the browser. In our example we will use a standard border width of 1:)

<table bgcolor="gray" width="50" height ="70" border="1">
</table>

Defining the spacing of cells from each other.

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15">
</table>

Define the Cell Padding. (This is the amount of spacing to be used within each cell. It tells the browser how much space to provide between the cell wall and the text and/or graphics within the cell.)

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8">
</table>

Defining the Table Border Color. (This color is set on the outside border of the table. In Microsoft Internet Explorer it will also effect the borders surrounding all cells. We have define the following example border color to be Teal)

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080">
</table>

The following two attributes are only valid when displayed in Microsoft Internet Explorer 4.x and will overide the bordercolor attribute defined in the previous example. The first is to define a Dark border color and the second is to define a Light Border color. This is to provide the ability to create a shadow effect from the Table. In the following example we have defined Navy as the Dark Color and Silver as the light color:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">
</table>

Defining Rows

A Table is Made up of Rows and Columns. Before a Column can be defined (actually it is a cell within a Row) a row must be defined.

Rows will take their default attributes from what is defined in the <table> tag, however these attributes may be overidden when defining a table row (i.e. <tr> tag) - The following is an example of defining table row with a single row defined:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr>
</tr>

</table>

The following attributes may be defined for a Table Row:

Row Alignment

<tr align="left">
<tr align="center">
<tr align="right">

Example of Row Alignment

The values for the Row Alignment are: Left, Center, or Right. The following is an example of the above table with the row alignment set to justify centered:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align="center">First row in table centered
</tr>

</table>

Vertical Alignment

    <tr align=center valign=top>
    <tr align=center valign=center>
    <tr align=center valign=bottom>
    <tr align=center valign=baseline>

Example of Vertical Alignment

The vertical alignment defines where the row is to line up vertically. Typically you would probably want the row to line up at the top, however there may be times which you want it to align vertically to create different effects. The following are examples of vertical alignment:

The following is an example with the vertical alignment set to top:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top>First row in table centered and aligned at top of row
</tr>

</table>

Background Color

<tr bgcolor ="gray">

Example of background color of the Row.

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top bgcolor="#8000000">First row in table centered and aligned at top of row, with gray background
</tr>

</table>

At this point we have the table and one row defined.

Let's now define 3 columns (or cells) within the single row we defined.

Defining Columns within the row(s)

A Row is divided into Columns (or cells) - Each Cell has many attributes the define what the appearance of that cell is. We will continue with the previous example when defining a row to add 3 columns to the row and place some text within each of the three cells.

Let's start by adding the three columns to our example code.

Each column (or cell) is define by the <td> and </td> tags. Below we have placed these two tags between the table row tags (i.e. <tr> and </tr> tags). We have placed three sets because we want three columns:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top bgcolor="#8000000">First row in table centered and aligned at top of row, with gray background

        <td> Column 1 in row 1</td>
        <td> Column 2 in row 1</td>
       <td> Column 3 in row 1</td>
    </tr>

</table>

The various attributes that can be set for each Cell.

You can define a Cell's vertical alignment and horizontal alignment just like a row.
Any attributes defined for a cell will overide the attributes defined for the row the cell resides in.

The Following example shows the vertical alignment and horizontal alignment:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top bgcolor="#8000000">First row in table centered and aligned at top of row, with gray background

        <td valign="middle" align="center"> Column 1 in row 1</td>
        <td valign="middle" align="center"> Column 2 in row 1</td>
        <td valign="middle" align="center"> Column 3 in row 1</td>
    </tr>

</table>

Next we add in the definition to define the overiding background color for the cell. We have defined the cell color to e Silver in the following example:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top bgcolor="#8000000">First row in table centered and aligned at top of row, with gray background

        <td valign="middle" align="center" bgcolor=#c0c0c0"> Column 1 in row 1</td>
        <td valign="middle" align="center" bgcolor=#c0c0c0"> Column 2 in row 1</td>
        <td valign="middle" align="center" bgcolor=#c0c0c0"> Column 3 in row 1</td>
    </tr>

</table>

The "nowrap" attribute forces the browser to keep the text of the cell on a single line without automatically word wrapping the text to the next line.

The following example shows the nowrap as part of the Tags:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<tr align=center valign=top bgcolor="#8000000">First row in table centered and aligned at top of row, with gray background

        <td valign="middle" align="center" bgcolor=#c0c0c0" nowrap> Column 1 in row 1</td>
        <td valign="middle" align="center" bgcolor=#c0c0c0" nowrap> Column 2 in row 1</td>
        <td valign="middle" align="center" bgcolor=#c0c0c0" nowrap> Column 3 in row 1</td>
    </tr>

</table>

Using a Caption for your table

A caption defines the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption. It is used between the <table> tag and <tr> (row) tag.

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">
<caption>Table Example </caption>

        <tr align=center valign=top bgcolor="#8000000">
            <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 1 in row 1</td>
            <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 2 in row 1</td>
            <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 3 in row 1</td>
         </tr>

</table>

Table Headings

Table headings are exactlly what they sound like. It's a way to define the heading value for a column. The table Headings are defined exactly as the Table Description (cells) except the tag is <th> and </th> instead of <td> and </td>

In the following example, we have added a row above the one we previously define and also defined the table headings for the three columns:

<table bgcolor="gray" width="50" height ="70" border="1" cellspacing="15" cellingpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#c0c0c0">

<caption>Table Example</caption>

<tr align=center valign=top bgcolor="#8000000">

        <th valign="middle" align="center" bgcolor="blue" nowrap>Heading 1</th>
        <th valign="middle" align="center" bgcolor="#c0c0c0" nowrap>Heading 2</th>
        <th valign="middle" align="center" bgcolor="#c0c0c0" nowrap>Heading 3</th>

</tr>

<tr align=center valign=top bgcolor="#8000000">

        <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 1 in row 1</td>
        <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 2 in row 1</td>
        <td valign="middle" align="center" bgcolor="#c0c0c0" nowrap> Column 3 in row 1</td>

</tr>

</table>

Example:

Table Example
Heading 1	Heading 2	Heading 3
Column 1 in row 1	Column 2 in row 1	Column 3 in row 1

(Check out the NCSA home page for an excellent example of using tables to control page layout.)